<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            padding: 8px;
        }

        .list {
            margin-top: 10px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .list li+li {
            /* border-top: 0; */
        }

        button {
            padding: 2px 10px;
        }

        .slide {
            margin-top: 10px;
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin-top: 10px;
            position: relative;
        }

        .slide .box {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <button>开始</button>
        <button>开始</button>
        <div class="slide">
            <div class="box"></div>
        </div>
    </div>
</body>
<script>

    // animate()  jquery 运动
    // $(ele).animate(params,speed,callback)

    // ele       运动的元素
    // params    运动的css属性及其终点值 {left:1000,top:500}
    // speed     1. 速度相关的单词 slow normal fast   2. 运动的时间(单位ms)
    // callback  本地运动到达终点时执行的回调函数

    // 恐怖回调 => 实现多链式运动
    $("button").eq(0).click(function () {
        $(".box").animate({ left: 1000 }, 1000, function () {
            console.log("left:1000!");

            $(".box").animate({ top: 500 }, 500, function () {
                console.log("top: 500 !");

                $(".box").animate({ left: 0 }, 1000, function () {
                    console.log("left: 0 !");

                    $(".box").animate({ top: 0 }, 500, function () {
                        console.log("top: 0 !");
                    })
                })
            })

        })


        // $(".box").animate({ left: 1000, top: 500 }, 1000, function () {
        //     console.log("left:1000!");
        // })


    })

    // jquery的链式操作  => 实现多链式运动
    // 运动队列: [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]
    $("button").eq(1).click(function () {
        $(".box").animate({ left: 1000 }, 1000, function () {
            console.log("left:1000!");
        }).animate({ top: 500 }, 500, function () {
            console.log("top: 500 !");
        }).animate({ left: 0 }, 1000, function () {
            console.log("left: 0 !");
        }).animate({ top: 0 }, 500, function () {
            console.log("top: 0 !");
        })
    })


    // function fn() {
    //     var timer = setInterval(function () {
    //         console.log(1111);
    //     }, 1000)
    //     return 100;
    // }

</script>

</html>